<template>
  <div class="restaurants">
    <div class="restaurants-header">
      <img src="./assets/logo copy.png" class="restaurants-img" />
      <el-dropdown > 
   <img src="./assets/profile-icon.png" class="restaurants-img" />
  <el-dropdown-menu slot="dropdown" placement=top style="width: 100px;text-align:center;">
    <el-button @click="login()">登录</el-button>
    <el-dropdown-item>狮子头</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
    </div>
    <router-view />
  </div>
</template>
<script>
  export default {
    name:'restaurants',
    data(){
      return{

      }
    },
    methods: {
      login(){
        // console.log(login);
        this.$router.push({
          name:"login"
        })
      }
    },
  }
</script>
<style lang="scss" scope>
.restaurants {
  width: 80%;
  height: 100%;
  margin: auto;
  margin-top: 50px;
  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &-img {
    width: 50px;
    height: 50px;
    cursor: pointer;
  }
  &-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
  }
  &-left {
    position: absolute;
    font-size: 10px;
    padding-left: 10px;
    padding-top: 15px;
  }
}
.el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-button{
    width: 70px;
    height: 35px;
    align-items: center;
    outline: none;
    margin: auto;
  }
</style>
